<template>
  <div class="wrap">
    <div class="text">404</div>
    <div class="btn" @click="goLogin">返回登录</div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { useStore } from "vuex"

const router = useRouter()
const store = useStore()

function goLogin() {
  store.commit('init')
  localStorage.clear()
  router.push({ name: 'login' })
}
</script>

<style scoped lang="less">
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .text {
    font-size: 40px;
    margin-bottom: 20px;
    color: #5faee3;
  }
  .btn {
    width: 120px;
    height: 40px;
    color: #ffa07a;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    border-radius: 4px;
    border: solid 0.5px #d3d3d3;
    transition: 0.2s;
  }
  .btn:active {
    border-color: #48c9b0;
    color: #48c9b0;
  }
}
</style>
